<template>
  <div class="wrapper">
    <dx-header-bar title="业务信息"></dx-header-bar>
    <md-tab-bar class="tab-bar"
                v-model="params.type"
                :items="businessTypes"
                @change="changeBusiness"/>
    <dx-search-bar placeholder="搜索" component="customer" @click.native="showSearchPopup"/>
    <dx-search-business ref="searchPopup"
                        :search-type="params.type"
                        :default-value="searchDefaultValue"
                        @on-search="search">
    </dx-search-business>
    <md-scroll-view class="scroll-view"
                    ref="scrollView"
                    :scrolling-x="false"
                    @refreshing="$_onRefresh"
                    @endReached="$_onEndReached">
      <md-scroll-view-refresh slot="refresh"
                              slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
                              refreshing-text="加载中…"
                              :scroll-top="scrollTop"
                              :is-refreshing="isRefreshing"
                              :is-refresh-active="isRefreshActive"/>
      <md-field class="scroll-view-item"
                v-for="(item, index) in dataList"
                :key="index">
        <template v-if="params.type === 'net'">
          <div slot="header" class="view-item-header">
            <span class="index">{{index+1}}.</span>
            <span class="title">{{item.PRODUCT_NO}}{{'('+item.ASSURE_GRADE+')'}}</span>
          </div>
          <md-detail-item title="客户编号：">
            <div class="detail-item-content">{{item.CUSTOMER_CODE}}</div>
          </md-detail-item>
          <md-detail-item title="客户名称：">
            <div class="detail-item-content">
              {{item.CUSTOMER_NAME}}<span class="more">({{item.SERVICE_LEVEL | levelFilter}})</span>
            </div>
          </md-detail-item>
          <md-detail-item title="业务保障等级：">
            <div class="detail-item-content">
              {{item.ASSURE_GRADE | levelFilter}}
            </div>
          </md-detail-item>
          <md-detail-item title="报障编号：">
            <div class="detail-item-content">{{item.WARNING_NO}}</div>
          </md-detail-item>
          <md-detail-item title="业务带宽：">
            <div class="detail-item-content">{{item.RATE}}</div>
          </md-detail-item>
          <md-detail-item title="客户业务接入地址：">
            <div class="detail-item-content">{{item.CUSTOMER_ADD}}</div>
          </md-detail-item>
          <md-detail-item title="传输接入方式：">
            <div class="detail-item-content">{{item.ACCESS_TYPE}}</div>
          </md-detail-item>
          <md-detail-item title="电路名称：">
            <div class="detail-item-content">{{item.CIRCUIT_NAME}}</div>
          </md-detail-item>
          <md-detail-item title="客户IP地址或地址段：">
            <div class="detail-item-content">
              {{item.CUSTOMER_IP_ADD}}
              <span class="more" @click="showMore(item)">
                {{item.showMore ? '收起' : '展开'}}
              </span>
            </div>
          </md-detail-item>
          <div v-if="item.showMore">
            <md-detail-item title="资源状态：">
              <div class="detail-item-content">{{item.SOURCE_STATE}}</div>
            </md-detail-item>
            <md-detail-item title="局端设备名称：">
              <div class="detail-item-content">{{item.CORE_NE_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="局端设备端口：">
              <div class="detail-item-content">{{item.CORE_NE_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="OLT名称：">
              <div class="detail-item-content">{{item.OLT_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="OLT端口：">
              <div class="detail-item-content">{{item.OLT_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="ONU名称：">
              <div class="detail-item-content">{{item.ONU_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="ONU管理IP：">
              <div class="detail-item-content">{{item.ONU_IP}}</div>
            </md-detail-item>
            <md-detail-item title="ONU_MAC地址：">
              <div class="detail-item-content">{{item.MAC}}</div>
            </md-detail-item>
            <md-detail-item title="光路名称：">
              <div class="detail-item-content">{{item.FIB_ID}}</div>
            </md-detail-item>
            <md-detail-item title="传输设备名称：">
              <div class="detail-item-content">{{item.ACCESS_TRANS_NE_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="传输设备端口：">
              <div class="detail-item-content">{{item.ACCESS_TRANS_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="传输局端设备名称：">
              <div class="detail-item-content">{{item.TRANCE_NE_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="传输局端设备端口：">
              <div class="detail-item-content">{{item.TRANCE_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="业务开通日期：">
              <div class="detail-item-content">{{item.OPEN_DATE}}</div>
            </md-detail-item>
            <md-detail-item title="客户经理：">
              <div class="detail-item-content">{{item.MARKETING_MANAGER.substring(0,1)}}
                <span
                  v-for="(str,strIndex) in item.MARKETING_MANAGER.length-1"
                  :key="strIndex">*</span>
              </div>
            </md-detail-item>
            <md-detail-item title="客户经理电话：">
              <div class="detail-item-content">
                <a :href="'tel://'+item.MARKETING_PHONE">
                  {{item.MARKETING_PHONE.substring(0,3)}}
                  ****
                  {{item.MARKETING_PHONE.substring(7,11)}}
                </a>
                <!--<div @click="call(item.MARKETING_PHONE)">aaa</div>-->
              </div>
            </md-detail-item>
            <md-detail-item title="业务别名：">
              <div class="detail-item-content">{{item.ALIAS}}</div>
            </md-detail-item>
            <md-detail-item title="备注：">
              <div class="detail-item-content">{{item.REMARK}}</div>
            </md-detail-item>
          </div>
        </template>
        <template v-if="params.type === 'trans'">
          <div slot="header" class="view-item-header">
            <span class="index">{{index+1}}.</span>
            <span class="title">{{item.PRODUCT_NO}}{{'('+item.ASSURE_GRADE+')'}}</span>
          </div>
          <md-detail-item title="客户编号：">
            <div class="detail-item-content">{{item.CUSTOMER_CODE}}</div>
          </md-detail-item>
          <md-detail-item title="客户名称：">
            <div class="detail-item-content">
              {{item.CUSTOMER_NAME}}<span class="more">({{item.SERVICE_LEVEL | levelFilter}})</span>
            </div>
          </md-detail-item>
          <md-detail-item title="报障编号：">
            <div class="detail-item-content">{{item.WARNING_NO}}</div>
          </md-detail-item>
          <md-detail-item title="电路名称：">
            <div class="detail-item-content">{{item.CIRCUIT_NAME}}</div>
          </md-detail-item>
          <md-detail-item title="业务带宽：">
            <div class="detail-item-content">{{item.RATE}}</div>
          </md-detail-item>
          <md-detail-item title="跨域类型：">
            <div class="detail-item-content">{{item.TYPE}}</div>
          </md-detail-item>
          <md-detail-item title="业务端点A传输接入方式：">
            <div class="detail-item-content">{{item.A_ACCESS_TYPE}}</div>
          </md-detail-item>
          <md-detail-item title="A端客户地址：">
            <div class="detail-item-content">{{item.A_CUSTOMER_ADD}}</div>
          </md-detail-item>
          <md-detail-item title="业务端点A传输设备名称：">
            <div class="detail-item-content">{{item.A_ACCESS_NE_NAME}}</div>
          </md-detail-item>
          <md-detail-item title="业务端点Z传输接入方式：">
            <div class="detail-item-content">{{item.Z_ACCESS_TYPE}}</div>
          </md-detail-item>
          <md-detail-item title="Z端客户地址：">
            <div class="detail-item-content">{{item.Z_CUSTOMER_ADD}}</div>
          </md-detail-item>
          <md-detail-item title="业务端点Z传输设备名称：">
            <div class="detail-item-content">
              {{item.Z_ACCESS_NE_NAME}}
              <span class="more" @click="showMore(item)">
                {{item.showMore ? '收起' : '展开'}}
              </span>
            </div>
          </md-detail-item>
          <div v-if="item.showMore">
            <md-detail-item title="流程ID：">
              <div class="detail-item-content">{{item.FLOWID}}</div>
            </md-detail-item>
            <md-detail-item title="派单地点ID：">
              <div class="detail-item-content">{{item.SEND_PLACE}}</div>
            </md-detail-item>
            <md-detail-item title="A端客户站点：">
              <div class="detail-item-content">{{item.A_CUSTOMER_SITE_ID}}</div>
            </md-detail-item>
            <md-detail-item title="Z端客户站点：">
              <div class="detail-item-content">{{item.Z_CUSTOMER_SITE_ID}}</div>
            </md-detail-item>
            <md-detail-item title="业务端点A传输设备端口：">
              <div class="detail-item-content">{{item.A_ACCESS_NE_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="业务端点Z传输设备端口：">
              <div class="detail-item-content">{{item.Z_ACCESS_NE_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="电路级别：">
              <div class="detail-item-content">{{item.CIRCUIT_LEVEL}}</div>
            </md-detail-item>
            <md-detail-item title="A端光路名称：">
              <div class="detail-item-content">{{item.A_FIB_ID}}</div>
            </md-detail-item>
            <md-detail-item title="Z端光路名称：">
              <div class="detail-item-content">{{item.Z_FIB_ID}}</div>
            </md-detail-item>
            <md-detail-item title="业务端点A到城域传送网接入点的电路保护方式：">
              <div class="detail-item-content">{{item.CIRCUIT_PROTECT}}</div>
            </md-detail-item>
            <md-detail-item title="业务端点Z到城域传送网接入点的电路保护方式：">
              <div class="detail-item-content">{{item.Z_CIRCUIT_PROTECT}}</div>
            </md-detail-item>
            <md-detail-item title="A端业务保障等级：">
              <div class="detail-item-content">{{item.A_ASSURE_GRADE}}</div>
            </md-detail-item>
            <md-detail-item title="Z端业务保障等级：">
              <div class="detail-item-content">{{item.Z_ASSURE_GRADE}}</div>
            </md-detail-item>
            <md-detail-item title="A端OLT名称：">
              <div class="detail-item-content">{{item.A_OLT_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="A端OLT端口：">
              <div class="detail-item-content">{{item.A_OLT_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="Z端OLT名称：">
              <div class="detail-item-content">{{item.Z_OLT_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="Z端OLT端口：">
              <div class="detail-item-content">{{item.Z_OLT_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="Z端ONU名称：">
              <div class="detail-item-content">{{item.Z_ONU_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="Z端ONU关联IP：">
              <div class="detail-item-content">{{item.Z_ONU_IP}}</div>
            </md-detail-item>
            <md-detail-item title="ONU_MAC地址：">
              <div class="detail-item-content">{{item.MAC}}</div>
            </md-detail-item>
            <md-detail-item title="ONU名称：">
              <div class="detail-item-content">{{item.ONU_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="ONU关联IP：">
              <div class="detail-item-content">{{item.ONU_IP}}</div>
            </md-detail-item>
            <md-detail-item title="VLAN类型：">
              <div class="detail-item-content">{{item.VLANTYPE}}</div>
            </md-detail-item>
            <md-detail-item title="VLAN：">
              <div class="detail-item-content">{{item.VLAN}}</div>
            </md-detail-item>
            <md-detail-item title="SVLAN：">
              <div class="detail-item-content">{{item.SVLAN}}</div>
            </md-detail-item>
            <md-detail-item title="CVLAN：">
              <div class="detail-item-content">{{item.CVLAN}}</div>
            </md-detail-item>
            <md-detail-item title="业务开通日期：">
              <div class="detail-item-content">{{item.OPEN_DATE}}</div>
            </md-detail-item>
            <md-detail-item title="客户经理：">
              <div class="detail-item-content">{{item.MARKETING_MANAGER.substring(0,1)}}
                <span
                  v-for="(str,strIndex) in item.MARKETING_MANAGER.length-1"
                  :key="strIndex">*</span>
              </div>
            </md-detail-item>
            <md-detail-item title="客户经理电话：">
              <div class="detail-item-content">
                <a :href="'tel:'+item.MARKETING_PHONE">
                  {{item.MARKETING_PHONE.substring(0,3)}}
                  ****
                  {{item.MARKETING_PHONE.substring(7,11)}}
                </a>
              </div>
            </md-detail-item>
            <md-detail-item title="业务别名：">
              <div class="detail-item-content">{{item.ALIAS}}</div>
            </md-detail-item>
            <md-detail-item title="备注：">
              <div class="detail-item-content">{{item.REMARK}}</div>
            </md-detail-item>
          </div>
        </template>
        <template v-if="params.type === 'speech'">
          <div slot="header" class="view-item-header">
            <span class="index">{{index+1}}.</span>
            <span class="title">{{item.PRODUCT_NO}}{{'('+item.ASSURE_GRADE+')'}}</span>
          </div>
          <md-detail-item title="客户编号：">
            <div class="detail-item-content">{{item.CUSTOMER_CODE}}</div>
          </md-detail-item>
          <md-detail-item title="客户名称：">
            <div class="detail-item-content">
              {{item.CUSTOMER_NAME}}<span class="more">({{item.SERVICE_LEVEL | levelFilter}})</span>
            </div>
          </md-detail-item>
          <md-detail-item title="业务保障等级：">
            <div class="detail-item-content">
              {{item.ASSURE_GRADE | levelFilter}}
            </div>
          </md-detail-item>
          <md-detail-item title="地市：">
            <div class="detail-item-content">{{item.REGION_ID}}</div>
          </md-detail-item>
          <md-detail-item title="客户业务接入地址：">
            <div class="detail-item-content">{{item.CUSTOMER_ADD}}</div>
          </md-detail-item>
          <md-detail-item title="码号段表：">
            <div class="detail-item-content">{{item.CODE_LIST}}</div>
          </md-detail-item>
          <md-detail-item title="传输接入方式：">
            <div class="detail-item-content">{{item.ACCESS_TYPE}}</div>
          </md-detail-item>
          <md-detail-item title="光路名称：">
            <div class="detail-item-content">{{item.FIB_ID}}</div>
          </md-detail-item>
          <md-detail-item title="客户侧传输设备：">
            <div class="detail-item-content">
              {{item.CUSTOMER_TRANS_NE_NAME}}
              <span class="more" @click="showMore(item)">
                {{item.showMore ? '收起' : '展开'}}
              </span>
            </div>
          </md-detail-item>
          <div v-if="item.showMore">
            <md-detail-item title="报障编号：">
              <div class="detail-item-content">{{item.WARNING_NO}}</div>
            </md-detail-item>
            <md-detail-item title="流程ID：">
              <div class="detail-item-content">{{item.FLOWID}}</div>
            </md-detail-item>
            <md-detail-item title="中继数：">
              <div class="detail-item-content">{{item.TRUNK_NUM}}</div>
            </md-detail-item>
            <md-detail-item title="语音产品子类：">
              <div class="detail-item-content">{{item.SPEECH_TYPE}}</div>
            </md-detail-item>
            <md-detail-item title="信令方式：">
              <div class="detail-item-content">{{item.SIGNAL_TYPE}}</div>
            </md-detail-item>
            <md-detail-item title="传输设备名称：">
              <div class="detail-item-content">{{item.ACCESS_TRANS_NE_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="传输设备端口：">
              <div class="detail-item-content">{{item.ACCESS_TRANS_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="传输局端设备名称：">
              <div class="detail-item-content">{{item.TRANCE_NE_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="传输局端设备端口：">
              <div class="detail-item-content">{{item.TRANCE_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="交换接入设备名称：">
              <div class="detail-item-content">{{item.SWITCH_ACCESS_NE_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="交换接入设备端口：">
              <div class="detail-item-content">{{item.SWITCH_ACCESS_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="局端设备名称：">
              <div class="detail-item-content">{{item.CORE_NE_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="局端设备端口：">
              <div class="detail-item-content">{{item.CORE_NE_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="VLAN类型：">
              <div class="detail-item-content">{{item.VLANTYPE}}</div>
            </md-detail-item>
            <md-detail-item title="分配的VLAN编号：">
              <div class="detail-item-content">{{item.VLAN}}</div>
            </md-detail-item>
            <md-detail-item title="分配的CVLAN编号：">
              <div class="detail-item-content">{{item.CVLAN}}</div>
            </md-detail-item>
            <md-detail-item title="分配的SVLAN编号：">
              <div class="detail-item-content">{{item.SVLAN}}</div>
            </md-detail-item>
            <md-detail-item title="OLT名称：">
              <div class="detail-item-content">{{item.OLT_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="OLT端口：">
              <div class="detail-item-content">{{item.OLT_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="ONU_MAC地址：">
              <div class="detail-item-content">{{item.MAC}}</div>
            </md-detail-item>
            <md-detail-item title="ONU名称1：">
              <div class="detail-item-content">{{item.ONU}}</div>
            </md-detail-item>
            <md-detail-item title="ONU管理IP1：">
              <div class="detail-item-content">{{item.ONU_IP}}</div>
            </md-detail-item>
            <md-detail-item title="客户业务应用IP地址(公网/私网)：">
              <div class="detail-item-content">{{item.CUSTOMER_IP_ADD}}</div>
            </md-detail-item>
            <md-detail-item title="电路名称：">
              <div class="detail-item-content">{{item.CIRCUIT_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="光路名称：">
              <div class="detail-item-content">{{item.FIB_ID}}</div>
            </md-detail-item>
            <md-detail-item title="业务端点到城域传送网接入点的电路保护方式：">
              <div class="detail-item-content">{{item.CIRCUIT_PROTECT}}</div>
            </md-detail-item>
            <md-detail-item title="接入客户日期：">
              <div class="detail-item-content">{{item.ACCESS_DATE}}</div>
            </md-detail-item>
            <md-detail-item title="客户经理：">
              <div class="detail-item-content">{{item.MARKETING_MANAGER.substring(0,1)}}
                <span
                  v-for="(str,strIndex) in item.MARKETING_MANAGER.length-1"
                  :key="strIndex">*</span>
              </div>
            </md-detail-item>
            <md-detail-item title="客户经理电话：">
              <div class="detail-item-content">
                <a :href="'tel:'+item.MARKETING_PHONE">
                  {{item.MARKETING_PHONE.substring(0,3)}}
                  ****
                  {{item.MARKETING_PHONE.substring(7,11)}}
                </a>
              </div>
            </md-detail-item>
            <md-detail-item title="业务别名：">
              <div class="detail-item-content">{{item.ALIAS}}</div>
            </md-detail-item>
            <md-detail-item title="备注：">
              <div class="detail-item-content">{{item.REMARK}}</div>
            </md-detail-item>
          </div>
        </template>
        <template v-if="params.type === 'sms'">
          <div slot="header" class="view-item-header">
            <span class="index">{{index+1}}.</span>
            <span class="title">{{item.PRODUCT_NO}}{{'('+item.ASSURE_GRADE+')'}}</span>
          </div>
          <md-detail-item title="客户编号：">
            <div class="detail-item-content">{{item.CUSTOMER_CODE}}</div>
          </md-detail-item>
          <md-detail-item title="客户名称：">
            <div class="detail-item-content">
              {{item.CUSTOMER_NAME}}<span class="more">({{item.SERVICE_LEVEL | levelFilter}})</span>
            </div>
          </md-detail-item>
          <md-detail-item title="地市：">
            <div class="detail-item-content">{{item.REGION_ID}}</div>
          </md-detail-item>
          <md-detail-item title="服务代码：">
            <div class="detail-item-content">{{item.SERVICE_CODE}}</div>
          </md-detail-item>
          <md-detail-item title="企业代码：">
            <div class="detail-item-content">{{item.ENTERPRISE_CODE}}</div>
          </md-detail-item>
          <md-detail-item title="行业网关名称：">
            <div class="detail-item-content">
              {{item.ACCESS_GATEWAY}}
              <span class="more" @click="showMore(item)">
                {{item.showMore ? '收起' : '展开'}}
              </span>
            </div>
          </md-detail-item>
          <div v-if="item.showMore">
            <md-detail-item title="流程ID：">
              <div class="detail-item-content">{{item.FLOWID}}</div>
            </md-detail-item>
            <md-detail-item title="业务代码：">
              <div class="detail-item-content">{{item.BUSINESS_CODE}}</div>
            </md-detail-item>
            <md-detail-item title="六位企业代码：">
              <div class="detail-item-content">{{item.ENTERPRISE_CODE_SIX}}</div>
            </md-detail-item>
            <md-detail-item title="服务范围：">
              <div class="detail-item-content">{{item.SERVICE_SCALE}}</div>
            </md-detail-item>
            <md-detail-item title="协议类型：">
              <div class="detail-item-content">{{item.SERVICE_TYPE}}</div>
            </md-detail-item>
            <md-detail-item title="企业短信签名：">
              <div class="detail-item-content">{{item.SMS_SIGNATURE}}</div>
            </md-detail-item>
            <md-detail-item title="黑白名单设置方式：">
              <div class="detail-item-content">{{item.BLACK_WHITE_SETTYPE}}</div>
            </md-detail-item>
            <md-detail-item title="是否需要行业网关M模块鉴权：">
              <div class="detail-item-content">{{item.IS_GATEWAY_MODE}}</div>
            </md-detail-item>
            <md-detail-item title="流量限制：">
              <div class="detail-item-content">{{item.FLOW_LIMIT}}</div>
            </md-detail-item>
            <md-detail-item title="最大连接数：">
              <div class="detail-item-content">{{item.MAX_LINK}}</div>
            </md-detail-item>
            <md-detail-item title="最大下发流量：">
              <div class="detail-item-content">{{item.MAX_DOWN_FLOW}}</div>
            </md-detail-item>
            <md-detail-item title="最大上行流量：">
              <div class="detail-item-content">{{item.MAX_UP_FLOW}}</div>
            </md-detail-item>
            <md-detail-item title="企业服务器IP地址：">
              <div class="detail-item-content">{{item.USER_SERVERIPADDRESS}}</div>
            </md-detail-item>
            <md-detail-item title="网关IP地址：">
              <div class="detail-item-content">{{item.REMAACCESS_GATEWAY_IPRK}}</div>
            </md-detail-item>
            <md-detail-item title="接入行业网关提供的服务端口号：">
              <div class="detail-item-content">{{item.ACCESS_GATEWAY_PORT}}</div>
            </md-detail-item>
            <md-detail-item title="登录网关用户名：">
              <div class="detail-item-content">{{item.ACCESS_GATEWAY_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="业务承载方式：">
              <div class="detail-item-content">{{item.BEAR_LINE}}</div>
            </md-detail-item>
            <md-detail-item title="关联产品实例标识：">
              <div class="detail-item-content">{{item.BEAR_LINE_PRODUCT_NO}}</div>
            </md-detail-item>
            <md-detail-item title="用户名称：">
              <div class="detail-item-content">{{item.USER_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="用户安装地址：">
              <div class="detail-item-content">{{item.USER_ADDR}}</div>
            </md-detail-item>
            <md-detail-item title="客户经理：">
              <div class="detail-item-content">{{item.MARKETING_MANAGER.substring(0,1)}}
                <span
                  v-for="(str,strIndex) in item.MARKETING_MANAGER.length-1"
                  :key="strIndex">*</span>
              </div>
            </md-detail-item>
            <md-detail-item title="客户经理电话：">
              <div class="detail-item-content">
                <a :href="'tel:'+item.MARKETING_PHONE">
                  {{item.MARKETING_PHONE.substring(0,3)}}
                  ****
                  {{item.MARKETING_PHONE.substring(7,11)}}
                </a>
              </div>
            </md-detail-item>
            <md-detail-item title="业务别名：">
              <div class="detail-item-content">{{item.ALIAS}}</div>
            </md-detail-item>
            <md-detail-item title="备注：">
              <div class="detail-item-content">{{item.REMARK}}</div>
            </md-detail-item>
          </div>
        </template>
        <template v-if="params.type === 'apn'">
          <div slot="header" class="view-item-header">
            <span class="index">{{index+1}}.</span>
            <span class="title">{{item.APN_NAME}}{{'('+item.ASSURE_GRADE+')'}}</span>
          </div>
          <md-detail-item title="客户编号：">
            <div class="detail-item-content">{{item.CUSTOMER_CODE}}</div>
          </md-detail-item>
          <md-detail-item title="客户名称：">
            <div class="detail-item-content">
              {{item.CUSTOMER_NAME}}
              <span class="more">({{item.SERVICE_LEVEL | levelFilter}})</span>
            </div>
          </md-detail-item>
          <md-detail-item title="业务保障等级：">
            <div class="detail-item-content">
              {{item.ASSURE_GRADE | levelFilter}}
            </div>
          </md-detail-item>
          <md-detail-item title="关联产品实例标识：">
            <div class="detail-item-content">{{item.PRODUCT_NO}}</div>
          </md-detail-item>
          <md-detail-item title="地市：">
            <div class="detail-item-content">{{item.REGION_ID}}</div>
          </md-detail-item>
          <md-detail-item title="APNID：">
            <div class="detail-item-content">{{item.APN_ID}}</div>
          </md-detail-item>
          <md-detail-item title="ip地址分配方式：">
            <div class="detail-item-content">
              {{item.IP_DISTRIBUTE}}
              <span class="more" @click="showMore(item)">
                {{item.showMore ? '收起' : '展开'}}
              </span>
            </div>
          </md-detail-item>
          <div v-if="item.showMore">
            <md-detail-item title="流程ID：">
              <div class="detail-item-content">{{item.FLOWID}}</div>
            </md-detail-item>
            <md-detail-item title="APN制作范围：">
              <div class="detail-item-content">{{item.APN_SCOPE}}</div>
            </md-detail-item>
            <md-detail-item title="业务开通范围：">
              <div class="detail-item-content">{{item.BUSSION_SCALE}}</div>
            </md-detail-item>
            <md-detail-item title="网络制式：">
              <div class="detail-item-content">{{item.NETWORK_SYS}}</div>
            </md-detail-item>
            <md-detail-item title="业务承载方式：">
              <div class="detail-item-content">{{item.BEAR_LINE}}</div>
            </md-detail-item>
            <md-detail-item title="是否双GGSN：">
              <div class="detail-item-content">{{item.IFDOUBLE}}</div>
            </md-detail-item>
            <md-detail-item title="第一个GGSN的名称：">
              <div class="detail-item-content">{{item.GGSN_NAME_FIRST}}</div>
            </md-detail-item>
            <md-detail-item title="第二个GGSN的名称：">
              <div class="detail-item-content">{{item.GGSN_NAME_SECOND}}</div>
            </md-detail-item>
            <md-detail-item title="第一个GGSN的GRE本端IP地址：">
              <div class="detail-item-content">{{item.GGSN_GRE_LOCAL_FIRST}}</div>
            </md-detail-item>
            <md-detail-item title="第一个GGSN的GRE企业端IP地址：">
              <div class="detail-item-content">{{item.GGSN_GRE_REMOTE_FIRST}}</div>
            </md-detail-item>
            <md-detail-item title="第一个GGSN的终端IP地址池：">
              <div class="detail-item-content">{{item.FRIRST_GGSN_IPPOOL}}</div>
            </md-detail-item>
            <md-detail-item title="第二个GGSN的GRE本端IP地址：">
              <div class="detail-item-content">{{item.GGSN_GRE_LOCAL_SECOND}}</div>
            </md-detail-item>
            <md-detail-item title="第二个GGSN的GRE企业端IP地址：">
              <div class="detail-item-content">{{item.GGSN_GRE_REMOTE_SECOND}}</div>
            </md-detail-item>
            <md-detail-item title="第二个GGSN的终端IP地址池：">
              <div class="detail-item-content">{{item.SECOND_GGSN_IPPOOL}}</div>
            </md-detail-item>
            <md-detail-item title="客户端互联IP地址：">
              <div class="detail-item-content">{{item.GRE_CUSTOM_INTER_IP}}</div>
            </md-detail-item>
            <md-detail-item title="用户服端务器IP地址：">
              <div class="detail-item-content">{{item.USER_SERVERIPADDRESS}}</div>
            </md-detail-item>
            <md-detail-item title="终端数量(用户端终端IP地址数量)：">
              <div class="detail-item-content">{{item.TERMINAL_NUMBER}}</div>
            </md-detail-item>
            <md-detail-item title="SIM卡HLR制作范围：">
              <div class="detail-item-content">{{item.HLR_SCOPE}}</div>
            </md-detail-item>
            <md-detail-item title="是否使用客户侧radius：">
              <div class="detail-item-content">{{item.IFRADIUS}}</div>
            </md-detail-item>
            <md-detail-item title="RADIUS服务器地址：">
              <div class="detail-item-content">{{item.IP_RADIUS}}</div>
            </md-detail-item>
            <md-detail-item title="用户安装地址：">
              <div class="detail-item-content">{{item.USER_ADDR}}</div>
            </md-detail-item>
            <md-detail-item title="用户名称：">
              <div class="detail-item-content">{{item.USER_NAME}}</div>
            </md-detail-item>
            <md-detail-item title="客户经理：">
              <div class="detail-item-content">{{item.MARKETING_MANAGER.substring(0,1)}}
                <span
                  v-for="(str,strIndex) in item.MARKETING_MANAGER.length-1"
                  :key="strIndex">*</span>
              </div>
            </md-detail-item>
            <md-detail-item title="客户经理电话：">
              <div class="detail-item-content">
                <a :href="'tel:'+item.MARKETING_PHONE">
                  {{item.MARKETING_PHONE.substring(0,3)}}
                  ****
                  {{item.MARKETING_PHONE.substring(7,11)}}
                </a>
              </div>
            </md-detail-item>
            <md-detail-item title="业务别名：">
              <div class="detail-item-content">{{item.ALIAS}}</div>
            </md-detail-item>
            <md-detail-item title="备注：">
              <div class="detail-item-content">{{item.REMARK}}</div>
            </md-detail-item>
          </div>
        </template>
        <template slot="footer">
          <md-button v-show="!isOnlyShowPerf"
                     @click="openTopo(item)" type="primary"
                     size="small" inline plain>拓扑
          </md-button>
          <md-button v-show="!isOnlyShowPerf"
                     @click="openDial(item)" type="primary"
                     size="small" inline plain>拨测
          </md-button>
          <md-button v-show="!isOnlyShowPerf"
                     @click="openAlarm(item)" type="primary"
                     size="small" inline plain>告警
          </md-button>
          <md-button v-show="!isOnlyShowPerf"
                     @click="openOrder(item)" type="primary"
                     size="small" inline plain>工单
          </md-button>
          <md-button @click="openPerformance(item)" type="primary"
                     size="small" inline plain>性能
          </md-button>
        </template>
      </md-field>
      <md-scroll-view-more slot="more"
                           :is-finished="isFinished"
                           :finished-text="finishedText"/>
    </md-scroll-view>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex';
import {
  Dialog,
  ScrollView,
  ScrollViewRefresh,
  ScrollViewMore,
  TabBar,
  Field,
  DetailItem,
  Button
} from 'mand-mobile';
import { DxHeaderBar, DxSearchBar, DxSearchBusiness } from '@/components';
import customerFilter from '@/mixins/customerFilter';
import { getBusinessList } from '@/api/resource';

export default {
  components: {
    DxHeaderBar,
    DxSearchBar,
    DxSearchBusiness,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore,
    [TabBar.name]: TabBar,
    [Field.name]: Field,
    [DetailItem.name]: DetailItem,
    [Button.name]: Button
  },
  mixins: [customerFilter],
  data() {
    return {
      // 只下钻性能信息
      isOnlyShowPerf: false,
      // search-bar
      searchDefaultValue: '',
      customerCode: this.$route.query.customerCode,
      businessType: '',
      params: {
        type: '',
        page: 1,
        limit: 10
      },
      dataList: [],
      isFinished: false
    };
  },
  computed: {
    ...mapState({
      // tabBar
      businessTypes: state => state.library.businessTypes
    }),
    finishedText() {
      return this.dataList.length ? '已全部加载' : '没有数据';
    }
  },
  created() {
    // tab-bar组件 默认currentName === '' && items.length时会调用change方法
    // 由于该页面被默认缓存，即keep-alive
    // 考虑到生命周期执行顺序问题，应在created时阻止activated内方法执行，避免重复调用
    // this.changeBusinessType(this.businessTypes[0]);
    this.init();
  },
  activated() {
    const timestamp = Number(this.$route.query.timestamp);
    if (this.timestamp !== timestamp) {
      this.timestamp = timestamp;
      this.init();
    }
    this.isOnlyShowPerf = this.$route.query.isOnlyShowPerf;
  },
  deactivated() {
    this.$refs.searchPopup.reset();
  },
  methods: {
    init() {
      this.timestamp = Number(this.$route.query.timestamp);
      this.params = {
        type: '',
        page: 1,
        limit: 10
      };
      const { customerCode, businessType, productNo } = this.$route.query;
      this.searchDefaultValue = customerCode ? `&customerCode=${customerCode}` : '';
      this.searchDefaultValue += businessType ? `&businessType=${businessType}` : '';
      this.searchDefaultValue += productNo ? `&productNo=${productNo}` : '';
      this.params.customerCode = customerCode || '';
      this.params.businessType = businessType || '';
      this.params.productNo = productNo || '';
      this.changeBusinessType(businessType ? { name: businessType } : this.businessTypes[0]);
    },
    showSearchPopup() {
      this.$refs.searchPopup.showPopup();
    },
    showMore(item) {
      // eslint-disable-next-line
      item.showMore = !item.showMore;
      this.$refs.scrollView.reflowScroller();
    },
    search(form) {
      this.params = Object.assign(this.params, form);
      this.isFinished = false;
      this.params.page = 1;
      // 搜索时触发下拉刷新增加交互动画，用于告知用户数据加载状态
      this.$refs.scrollView.triggerRefresh();
    },
    $_onRefresh() {
      this.isFinished = false;
      this.params.page = 1;
      this.loadData('refresh');
    },
    $_onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.params.page += 1;
      this.loadData();
    },
    /**
     * @param data 列表数据
     * @param type 加载数据类型，下拉刷新或者上拉加载
     * @param isFinished Boolean 数据是否加载完毕
     */
    $_onFinished(data, type, isFinished) {
      this.isFinished = isFinished;
      if (type === 'refresh') {
        this.dataList = data;
        this.$refs.scrollView.finishRefresh();
      } else {
        this.dataList = this.dataList.concat(data);
        this.$refs.scrollView.finishLoadMore();
      }
    },
    loadData(type) {
      if (this.params.type === 'mpls') {
        Dialog.alert({
          title: '提示',
          content: 'MPLS_VPN专线还在建设中',
          confirmText: '确定'
        });
        this.dataList = [];
        this.isFinished = true;
        this.$refs.scrollView.finishRefresh();
        return;
      }
      getBusinessList(this.params).then(result => {
        const { datas, count } = result.data;
        const { page, limit } = this.params;
        const data = [];
        if (datas instanceof Array && datas.length) {
          datas.forEach(e => {
            e.showMore = false;
            data.push(e);
          });
        }
        this.$_onFinished(data, type, page * limit >= count);
      }).catch(() => {
        this.$_onFinished([], type, true);
      });
    },
    changeBusiness({ name }) {
      this.params = {
        type: '',
        page: 1,
        limit: 10
      };
      this.searchDefaultValue = '&customerCode=&businessType=&productNo=';
      this.changeBusinessType(name);
    },
    changeBusinessType({ name }) {
      this.params.type = name;
      this.$nextTick(() => {
        this.$refs.scrollView.scrollTo(0, 0);
        this.$refs.scrollView.triggerRefresh();
      });
    },
    openPerformance(item) {
      const query = {};
      if (this.isOnlyShowPerf) {
        query.type = this.params.type;
        query.productNo = item.PRODUCT_NO;
        query.from = 'home';
      } else {
        query.type = this.params.type;
        query.productNo = item.PRODUCT_NO;
      }
      this.$router.push({
        name: 'performance',
        query
      });
    },
    openOrder() {
      this.$router.push({
        name: 'order'
      });
    },
    openAlarm(item) {
      this.$router.push({
        name: 'alarm',
        query: {
          productNo: item.PRODUCT_NO
        }
      });
    },
    openDial() {
      this.$router.push({
        name: 'building'
      });
    },
    openTopo(item) {
      this.$router.push({
        name: 'topology',
        query: {
          serviceId: item.SERVICE_ID
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    display : flex
    flex-direction : column
    height : 100%

  .tab-bar
    font-size : 28px

  .scroll-view
    flex : 1

  .scroll-view-item
    margin-bottom : 20px
    padding : 20px

  .view-item-header
    color : theme-color
    font-size : 32px
    font-weight : bold

    .index
      margin-right : 20px
      color : #333

  .detail-item-content
    flex : 1
    word-break : break-all

    .more
      margin-left : 20px
      font-weight : bold
      white-space : nowrap
      color : theme-color

  .md-button
    float : right
    margin-left : 8px
    padding : 0 8px
    height : 48px
    font-size : 24px

</style>
